<template>
  <div class="app-container">
    <el-button style="margin-left: 30px" type="info" @click="addOfferTemplate">添加offer模板</el-button>
    <el-table
      :data="templateList"
      style="width: 100%">
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="templateName" label="模板主题"></el-table-column>
      <el-table-column prop="createTime" label="创建时间">
        <template scope="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="selectOfferTemplate(scope.row)">查看</el-button>
          <el-button type="primary" size="small" @click="updateItoTemplate(scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="deleteOfferTemplate(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="查看" :visible.sync="selectFlag" width="60%" append-to-body>
      <div style="margin: 30px;">
        <div
          style="padding: 6px;margin-bottom: 20px;margin-right: 30px;margin-left: 30px; margin-top: 30px;border: 1px #e8dd10 solid">
          <div style="border: 1px #e8dd10 solid;padding: 40px">
            <span v-html="itoTemplate.emailContent"></span>
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog title="编辑模板" @close="resetTemplate" :visible.sync="editorDialog" width="60%" append-to-body>
      <div>
        <p><span
          class="u_logo"></span>
          <el-form style="margin: 10px" :model="templateBean" ref="itoTemplateForm" :rules="itoTemplateRules">
            <el-form-item label="邮件标题" prop="templateName">
              <el-input style="width: 300px" v-model="templateBean.templateName" placeholder="请输入邮件标题"></el-input>
              <span style="float: right">
                  <el-button @click="resetTemplate()">取消</el-button>
                  <el-button type="primary" style="margin-left: 10px;margin-right: 20px" @click="send()">保存</el-button>
                </span>
            </el-form-item>
          </el-form>
          <el-button size="small" style="margin: 6px" @click="insertContentHandle('#入职岗位#')">#入职岗位#</el-button>
          <el-button size="small" style="margin: 6px" @click="insertContentHandle('#候选人姓名#')">#候选人姓名#</el-button>
          <el-button size="small" style="margin: 6px" @click="insertContentHandle('#公司名称#')">#公司名称#</el-button>
          <el-button size="small" style="margin: 6px" @click="insertContentHandle('#入职部门#')">#入职部门#</el-button>
          <el-button size="small" style="margin: 6px" @click="insertContentHandle('#预计入职时间#')">#预计入职时间#</el-button>
          <el-button size="small" style="margin: 6px" @click="insertContentHandle('#联系人姓名#')">#联系人姓名#</el-button>
          <el-button size="small" style="margin: 6px" @click="insertContentHandle('#联系人电话#')">#联系人电话#</el-button>
          <el-button size="small" style="margin: 6px" @click="insertContentHandle('#联系人邮箱#')">#联系人邮箱#</el-button>
          <el-button size="small" style="margin: 6px" @click="insertContentHandle('#试用期工资#')">#试用期工资#</el-button>
          <el-button size="small" style="margin: 6px" @click="insertContentHandle('#转正工资#')">#转正工资#</el-button>
          <el-button size="small" style="margin: 6px" @click="insertContentHandle('#工作地点#')">#工作地点#</el-button>
          <el-button size="small" style="margin: 6px" @click="insertContentHandle('#试用期#')">#试用期#</el-button>
        </p>
        <el-card>
          <quill-editor v-model.trim="contentEmail" ref="myQuillEditor" style="height: 700px;"
                        :options="editorOption">
          </quill-editor>
        </el-card>
      </div>

    </el-dialog>
    <br>
  </div>
</template>

<script>
  import {
    selectTemplateById,
    selectTemplateList,
    addTemplate,
    deleteOfferTemplate,
    updateTemplateById
  } from "@/api/system/issueEmail"
  import {
    quillEditor
  } from 'vue-quill-editor'
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'

  // 工具栏配置项
  const toolbarOptions = [
    // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
    ['bold', 'italic', 'underline', 'strike'],
    // 引用  代码块-----['blockquote', 'code-block']
    ['blockquote', 'code-block'],
    // 1、2 级标题-----[{ header: 1 }, { header: 2 }]
    [{header: 1}, {header: 2}],
    // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
    [{list: 'ordered'}, {list: 'bullet'}],
    // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
    [{script: 'sub'}, {script: 'super'}],
    // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
    [{indent: '-1'}, {indent: '+1'}],
    // 文本方向-----[{'direction': 'rtl'}]
    [{direction: 'rtl'}],
    // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
    [{size: ['small', false, 'large', 'huge']}],
    // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
    [{header: [1, 2, 3, 4, 5, 6, false]}],
    // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
    [{color: []}, {background: []}],
    // 字体种类-----[{ font: [] }]
    [{font: []}],
    // 对齐方式-----[{ align: [] }]
    [{align: []}],
    // 清除文本格式-----['clean']
    ['clean'],
    // 链接、图片、视频-----['link', 'image', 'video']
    ['image', 'video']
  ]
  export default {
    name: "Template",
    components: {
      quillEditor
    },
    data() {
      return {
        selectFlag: false,
        contentEmail: '',
        itoTemplateRules: {
          templateName: [
            {required: true, message: '邮件标题不能为空', trigger: 'blur'}
          ]
        },
        templateBean: {
          id: null,
          emailContent: '',
          templateName: ''
        },
        contentAs: '',
        editorOption: {
          modules: {
            toolbar: toolbarOptions
          },
          theme: 'snow',
          placeholder: '请输入正文'
          // Some Quill optiosn...
        },
        itoTemplate: {
          id: 1,
          emailContent: ''
        },
        templateList: [],
        editorDialog: false,
      }
    },
    created() {
      this.getTemplateList();
    },
    methods: {
      resetTemplate() {
        this.contentEmail = ''
        this.templateBean = {
          id: null,
          emailContent: '',
          templateName: ''
        }
        this.editorDialog = false
      },
      selectOfferTemplate(row) {
        this.getTemplateById(row.id)
        this.selectFlag = true;
      },
      updateItoTemplate(row) {
        this.getTemplateById(row.id)
        this.templateBean.id = row.id
        this.templateBean.emailContent = row.emailContent
        this.templateBean.templateName = row.templateName
        this.editorDialog = true
      },
      deleteOfferTemplate(row) {
        this.$modal.confirm('是否确认删除').then(function () {
          deleteOfferTemplate(row.id).then(res => {})
        }).then(res =>{
          this.$message({
            showClose: true,
            message: '已删除',
            type: 'success'
          });
          this.getTemplateList();
        })
      },
      // 插入内容的方法
      async insertContentHandle(text) {
        //获取鼠标光标
        let index = this.$refs.myQuillEditor.quill.selection.savedRange.index
        this.$refs.myQuillEditor.quill.insertText(index, text)
      },
      send() {
        this.$refs['itoTemplateForm'].validate(valid => {
          if (valid) {
            this.templateBean.emailContent = encodeURIComponent(this.contentEmail);
            if (this.templateBean.id == null) {
              addTemplate(this.templateBean).then(resp => {
                this.templateBean = {}
                this.getTemplateList()
                this.editorDialog = false
              })
            } else {
              updateTemplateById(this.templateBean).then(resp => {
                this.getTemplateById(this.templateBean.id)
                this.editorDialog = false
                this.templateBean = {}
                this.contentEmail = ''
              })
            }
          }
        });
      },

      getTemplateById(id) {
        if (id == undefined && id == null) {
          selectTemplateById(this.itoTemplate.id, 0).then(resp => {
            this.itoTemplate = resp.data
            if (this.itoTemplate.emailContent != null && '' != this.itoTemplate.emailContent) {
              this.itoTemplate.emailContent = this.itoTemplate.emailContent
                .replaceAll("{{ offerBean.stationName }}", "#入职岗位#")
                .replaceAll("{{ offerBean.resumeName }}", "#候选人姓名#")
                .replaceAll("{{ offerBean.companyName }}", "#公司名称#")
                .replaceAll("{{ offerBean.deptName }}", "#入职部门#")
                .replaceAll("{{ parseTime(offerBean.expectedDate, '{y}-{m}-{d}') }}", "#预计入职时间#")
                .replaceAll("{{ offerBean.linkName }}", "#联系人姓名#")
                .replaceAll("{{ offerBean.linkPhone }}", "#联系人电话#")
                .replaceAll("{{ offerBean.linkEmail }}", "#联系人邮箱#")
                .replaceAll("{{ offerBean.sySalary }}", "#试用期工资#")
                .replaceAll("{{ offerBean.zzSalary }}", "#转正工资#")
                .replaceAll("{{ offerBean.wokeAddress }}", "#工作地点#")
                .replaceAll("{{ offerBean.qualifyingPeriod }}", "#试用期#");
              this.contentEmail = this.itoTemplate.emailContent
            }
          })
          this.getTemplateList()
        } else {
          selectTemplateById(id, 0).then(resp => {
            this.itoTemplate = resp.data
            if (this.itoTemplate.emailContent != null && '' != this.itoTemplate.emailContent) {
              this.itoTemplate.emailContent = this.itoTemplate.emailContent
                .replaceAll("{{ offerBean.stationName }}", "#入职岗位#")
                .replaceAll("{{ offerBean.resumeName }}", "#候选人姓名#")
                .replaceAll("{{ offerBean.companyName }}", "#公司名称#")
                .replaceAll("{{ offerBean.deptName }}", "#入职部门#")
                .replaceAll("{{ parseTime(offerBean.expectedDate, '{y}-{m}-{d}') }}", "#预计入职时间#")
                .replaceAll("{{ offerBean.linkName }}", "#联系人姓名#")
                .replaceAll("{{ offerBean.linkPhone }}", "#联系人电话#")
                .replaceAll("{{ offerBean.linkEmail }}", "#联系人邮箱#")
                .replaceAll("{{ offerBean.sySalary }}", "#试用期工资#")
                .replaceAll("{{ offerBean.zzSalary }}", "#转正工资#")
                .replaceAll("{{ offerBean.wokeAddress }}", "#工作地点#")
                .replaceAll("{{ offerBean.qualifyingPeriod }}", "#试用期#");
              this.contentEmail = this.itoTemplate.emailContent
            }
          })
          this.getTemplateList()
        }
      },
      getTemplateList() {
        selectTemplateList().then(resp => {
          this.templateList = resp.data
        })
      },
      addOfferTemplate() {
        this.editorDialog = true
      }
    }
  }
</script>

<style scoped>

</style>
